<script setup lang="ts">
useHead({
  titleTemplate: `%s - 注册`,
  meta:[
    {
      name: "description",
      content: `注册页面`
    }
  ]
})

definePageMeta({
  layout:"start"
})
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const phone=ref('');
const isSamePassword = (value:string):boolean => {
  return value===password.value;
}
const verityLength=(value:string):boolean=> {
  return (value.length >= 4 && value.length <= 14);
}
const goLogin=()=>{
  navigateTo('/login');
}

const onSubmit =(values:string) => {
  // console.log('submit', values);
  let tmp=JSON.parse(JSON.stringify(values));
  delete tmp.confirmPassword;
  cFetch<null>('/account/api/register',{
    auth:false,
    defaultOpts:{
      method:'POST',
      body:tmp
    }
  }).then(res=>{
    if(res.code===200){
      showNotify({
        type:"success",
        message:"注册成功",
        duration:2000
      })
      goLogin()
    }
  })

  // console.log(value)
};
</script>

<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[
              { required: true, message: '请填写用户名' },
              {
                validator:verityLength,
                message:'用户名的长度需要在 4~14 位'
              },
              {
                pattern: /^(?=.*[a-zA-Z])[a-zA-Z0-9]+$/,
                message:'用户名只能由数字和字母组成且至少包含一个字母'
              }
              ]"
      />
      <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[
              { required: true, message: '请填写手机号' },
              {
                pattern:/^1[3-9]\d{9}$/,
                message:'手机号格式不对'
              }
              ]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[
              { required: true, message: '请填写密码' },
              {
                validator: verityLength,
                message:'密码的长度需要在 4 ~ 14 位'
              },
              {
                pattern:/^[a-zA-Z0-9]+$/,
                message:'密码只能由数字和字母组成'
              }
              ]"
      />
      <van-field
          v-model="confirmPassword"
          type="password"
          name="confirmPassword"
          label="确认密码"
          placeholder="确认密码"
          :rules="[
              { required: true, message: '请再次填写密码' },
              {
                validator: isSamePassword,
                message:'两次密码不一致',
              }
              ]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        立即注册
      </van-button>
    </div>

  </van-form>
  <span class="my-font" @click="goLogin">已有账号？去登录</span>
  <span class="help" @click="navigateTo('/questions')">常见问题</span>
  <pre>

  </pre>
</template>
<style scoped>
.my-font {
  color: gray;
  float: right;
  position: absolute;
  right: 10%;
}
.help{
  left: 5%;
  color: gray;
  position: absolute;
}
</style>